<template>
  <div class="user-info-component">
    <Popover
      v-model:open="popoverVisible"
      placement="bottomLeft"
      trigger="click"
      overlayClassName="user-info-popover"
      :getPopupContainer="getPopupContainer || defaultGetPopupContainer"
      :overlayStyle="{ zIndex: popoverZIndex }"
    >
      <template #content>
        <UserInfoCard :user="userInfo" />
      </template>
      
      <div 
        class="user-info-trigger"
        :class="{ 'user-info-trigger--disabled': disabled }"
        @click="handleClick"
      >
        <Avatar 
          v-if="showAvatar"
          :src="userInfo?.avatar || defaultAvatar" 
          :size="avatarSize"
          class="user-info-avatar"
        />
        
        <div v-if="showInfo" class="user-info-text">
          <span v-if="showName" class="user-info-name">
            {{ userInfo?.nickName || userInfo?.userName || '未知用户' }}
          </span>
          <span v-if="showAccount" class="user-info-account">
            {{ userInfo?.userName || '' }}
          </span>
        </div>
        
        <Spin v-if="loading" size="small" />
      </div>
    </Popover>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { Avatar, Popover, Spin } from 'ant-design-vue'
import { getUserApi } from '@/api/system/organize/user.api'
import UserInfoCard from './UserInfoCard.vue'
import defaultAvatar from '@/assets/images/header.jpg'

defineOptions({ name: 'UserInfo' })

const props = defineProps({
  userId: {
    type: String,
    required: true
  },
  showAvatar: {
    type: Boolean,
    default: true
  },
  showName: {
    type: Boolean,
    default: true
  },
  showAccount: {
    type: Boolean,
    default: false
  },
  avatarSize: {
    type: Number,
    default: 32
  },
  disabled: {
    type: Boolean,
    default: false
  },
  getPopupContainer: {
    type: Function,
    default: null
  },
  autoLoad: {
    type: Boolean,
    default: true
  },
  userInfo: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['click', 'userLoaded'])

const loading = ref(false)
const popoverVisible = ref(false)
const userInfo = ref(props.userInfo || null)

const showInfo = computed(() => props.showName || props.showAccount)

// 默认将Popover挂载到body
const defaultGetPopupContainer = () => document.body
// 提高层级，确保覆盖ElementPlus Dialog
const popoverZIndex = 4000

watch(() => props.userInfo, (newUserInfo) => {
  if (newUserInfo) {
    userInfo.value = newUserInfo
  }
}, { immediate: true })

const loadUserInfo = async () => {
  if (!props.userId || userInfo.value) return
  
  try {
    loading.value = true
    const data = await getUserApi(props.userId)
    userInfo.value = data
    emit('userLoaded', data)
  } catch (error) {
    console.error('Failed to load user info:', error)
  } finally {
    loading.value = false
  }
}

const handleClick = (event) => {
  if (props.disabled) return
  emit('click', event)
}

onMounted(() => {
  if (props.autoLoad && !userInfo.value) {
    loadUserInfo()
  }
})

defineExpose({
  loadUserInfo,
  getUserInfo: () => userInfo.value,
  setUserInfo: (user) => {
    userInfo.value = user
  }
})
</script>

<style scoped>
.user-info-component {
  display: inline-block;
}

.user-info-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.user-info-trigger:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.user-info-trigger--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.user-info-trigger--disabled:hover {
  background-color: transparent;
}

.user-info-avatar {
  flex-shrink: 0;
}

.user-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-info-name {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-info-account {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-info-popover .ant-popover-inner {
  padding: 0;
}
</style> 